<template>
	<view>
		<uni-nav-bar left-icon="arrowthinleft" :border="false" :fixed="false" title="附近商家" bg="bg-zhuse" color="#fff"
			@clickLeft="goBack()"></uni-nav-bar>
		<map class="map" :style="{'height':height+'rpx'}" scale="11" :latitude="info.latitude"
			:longitude="info.longitude" :markers="covers" @markertap="clickTap"></map>
		<!-- 		<view class="bg-fff padding-30 foot_fixed">
			<view class="flex align-center">
				<image class="m_img" :src="shopInfo.logo.url || '../../static/img/logo.png'" mode="aspectFit"
					v-if="shopInfo.logo && shopInfo.logo.url"></image>
				<view class="flex1 padding-x-30">
					<view class="fs-30 fw-bolder">{{shopInfo.name}}</view>
					<view class="fs-28 color-aaa">共9件商品</view>
				</view>
				<view class="m_enter_btn" @tap="jump(`/pages/offlineShop/shopDetail?id=${shopInfo.id}`)">进到店铺</view>
			</view>
			<view class="bg-fff padding-30 margin-top-24">
				<view class="flex align-center">
					<view class="flex1 padding-x-20">
						<view class="fs-30 color-333 fw-bold">{{shopInfo.name}}</view>
						<view class="fs-28 color-aaa margin-top-10">{{shopInfo.address}}</view>
					</view>
					<image class="shop_logo" src="../../static/img/quhuodizhi.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="padding-y-30">
				<button class="public_btn" @tap="openLocation()">导航</button>
			</view>
		</view> -->

		<view class="fixed w100" style="z-index: 9999;bottom: 0;">
			<!-- <view class="bg-fff flex flex-direction" > -->
			<!-- <view class="bg-fff padding-x-24 padding-y-30 fs-30 color-zhuse" style="border-top-left-radius: 30rpx;border-top-right-radius: 30rpx;">附近商家</view> -->
			<!-- <view style="overflow-y: auto;" > -->
			<view @tap="openLocation(item.latitude,item.longitude,item.name)" v-for="(item,index) in shops" :key='index'
				class="flex align-center justify-between bg-fff solid-bottom padding-x-24  padding-y-30">
				<text class="fs-30 color-333">{{item.name}}</text>
				<view class="flex align-center">
					<text class="fs-30 color-999 margin-right-16">{{item.distance || 0}}m</text>
					<image src="../../static/img/next2.png" style="width:10rpx ;height: 20rpx;"></image>
				</view>
			</view>
			<!-- </view> -->
			<!-- </view> -->

		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				height: 1500,
				info: {
					latitude: 35.861447,
					longitude: 104.198068,
					sort: "sort",
					// distance: 5
				},
				covers: [],
				shops: [],
				shopInfo: {},
				show: false
			};
		},
		onLoad() {
			uni.getLocation({
				type: 'gcj02',
				geocode: true,
				success: (res) => {
					console.log(res)
					this.info.latitude = res.latitude
					this.info.longitude = res.longitude
					this.init();
				},
				fail(err) {
					console.log(err)
				}
			});
		},
		methods: {
			init() {
				var that = this;
				let arr = []
				console.error(this.info)
				this.$api.nearby_shop(this.info).then(async res => {
					if (res.code == 1) {
						console.log(res.data)
						that.shops = res.data.data;
						if (res.data.data.length > 0) {
							await res.data.data.forEach((item, index) => {
								let obj = {
									id: item.id,
									latitude: item.latitude,
									longitude: item.longitude,
									iconPath: '../../static/img/close.png'
								}
								arr.push(obj)
							})
							that.covers = arr
						}
					}
				})
			},
			clickTap(e) {
				var that = this;
				console.log(e);
				this.height = 800;
				this.show = true;
				this.shops.forEach((item, index) => {
					if (e.detail.markerId == item.id) {
						that.shopInfo = item;
						that.openLocation(item.latitude, item.longitude, item.name)
					}
				})
			},
			openLocation(lat, lon, name) {
				uni.openLocation({
					latitude: Number(lat),
					longitude: Number(lon),
					name: name,
					success: function() {
						console.log('success');
					}
				});
			},
		}
	};
</script>
<style lang="scss" scoped>
	.map {
		width: 750rpx;
		height: 1334rpx;
	}
</style>
